@use "@/assets/styles/mixin";
.table-container{
  flex:1;
  @include mixin.flex-column;
  overflow: auto;
  //margin-top: 22px;
  padding: 20px;
  //&-filter{
  //  @include mixin.flex-align;
  //  width: 100%;
  //  padding: 14px 11px;
  //  box-sizing: border-box;
  //  border: 1px solid #E1E6ED;
  //  border-bottom: 0;
  //  font-size: 14px;
  //  color: #606266;
  //  line-height: 24px;
  //  .switch-list{
  //    @include mixin.flex-align;
  //  }
  //  .switch-item:last-child{
  //    margin-left: 50px;
  //  }
  //  :deep(.el-switch){
  //    margin-left: 10px;
  //  }
  //}
}

// 发起任务
//.content-item-search{
//  @include mixin.flex-align;
//  :deep(.el-input__wrapper){
//    border: 0;
//    box-shadow: none;
//    outline: 0;
//    background-color: #fff !important;
//    &:hover{
//      box-shadow: none;
//    }
//    &.is-focus{
//      box-shadow: none;
//    }
//  }
//  :deep(.svg-icon){
//    margin-right: 5px;
//    cursor: pointer;
//  }
//}


:deep(.el-table) {
  flex: 1;
  overflow:auto;
  :deep(.el-table .even-row td) {
    background-color: #F5F7FA !important;
    font-size: 14px;
    color: #606266;
  }

  :deep( .el-table .odd-row td) {
    background-color: #051f51 !important;
    font-size: 14px;
    color: #606266;
  }
}
:deep(.el-table--border .el-table__cell) {
  border-right: 0;
}

.opt-buttons{
  @include mixin.flex;
  flex-wrap: nowrap;
}


//.plan-time-dialog{
//  :deep(.el-dialog){
//    @include mixin.flex-column;
//    max-height: 80vh;
//    overflow-y: hidden;
//  }
//  :deep(.el-dialog__header){
//    margin-bottom: 24px;
//  }
//  :deep(.el-dialog__body){
//    @include mixin.flex-overflow;
//  }
//
//  .dialog-footer{
//    text-align: center;
//  }
//}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-textarea__inner),
:deep(.el-input__count){
  background-color: #F2F3F5 !important;
}

.el-input.is-disabled :deep(.el-input__inner){
  font-size: 14px;
  line-height: 22px;
}
.task-tip{
  font-size: 12px;
  color: #86909C;
  line-height: 22px;
}


.client-stage-drawer{
  :deep(.el-drawer){
    width: 900px !important;
    border-radius: 20px 0 0 20px;
  }
  :deep(.el-drawer__body){
    @include mixin.flex;
    padding: 0;
  }
  .stage-intention,
  .stage-follow-up{
    width: 50%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .stage-intention{
    border-right: 1px solid #DCDFE6;
    .opt-instructions{
      @include mixin.flex-align;
      margin: 24px 0 4px;
      font-size: 12px;
      color: #007DFF;
      line-height: 22px;
      cursor: pointer;
      span{
        margin-left: 5px;
      }
    }
    .state-forms{
      position: relative;
      width: 410px;
      height: 65%;
      padding: 20px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      overflow-y: auto;
      background-color: #F6F8FA;
      border: 1px solid #DCDFE6;
      :deep(.el-empty){
        @include mixin.position-center;
      }
      :deep(.form-item-el){
        width: 100%;
      }
    }
    .next-task-content{
      height: 20%;
      overflow: scroll;
    }
  }
  .stage-follow-up{
    overflow-y:auto;
    :deep(.el-timeline){
      flex:1;
      position: relative;
      padding-left: 0;
      margin-top: 24px;
    }
    :deep(.el-timeline-item__node--normal){
      width: 6px;
      height: 6px;
      left: 2px;
    }
    .hide-left-line{
      :deep(.el-timeline-item > .el-timeline-item__tail){
        border-left: none !important;
      }
    }
    .timeline-date{
      @include mixin.flex-align;
      .date{
        font-size: 16px;
        color: rgba(0,0,0,0.6);
        line-height: 24px;
      }
      .time{
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
        .el-icon{
          margin: 0 4px 0 8px;
        }
      }
    }
    .timeline{
      &-title{
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0,0,0,0.9);
        line-height: 24px;
      }
      &-desc{
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;
        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }
        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;
          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }
        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }
    .add-follow-up{
      @include mixin.flex-center();
      flex-direction: column;
      width:100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;
      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }
      span{
        margin-top: 10px;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
      }
    }
  }
}
.client-follow-drawer{
  :deep(.el-drawer){
    width: 500px !important;
    border-radius: 20px 0 0 20px;
  }
  :deep(.el-drawer__body){
    padding: 0;
  }
  .stage-follow-up{
    width: 100%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }
  .stage-follow-up{
    @include mixin.flex-column;
    :deep(.el-timeline){
      @include mixin.flex-overflow;
      padding-left: 0;
      margin-top: 24px;
    }
    :deep(.el-timeline-item__node--normal){
      width: 6px;
      height: 6px;
      left: 2px;
    }
    .hide-left-line{
      :deep(.el-timeline-item > .el-timeline-item__tail){
        border-left: none !important;
      }
    }
    .timeline-date{
      @include mixin.flex-align;
      .date{
        font-size: 16px;
        color: rgba(0,0,0,0.6);
        line-height: 24px;
      }
      .time{
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
        .el-icon{
          margin: 0 4px 0 8px;
        }
      }
    }
    .timeline{
      &-title{
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0,0,0,0.9);
        line-height: 24px;
      }
      &-desc{
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;
        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }
        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;
          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }
        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }

    .add-follow-up{
      @include mixin.flex-center();
      flex-direction: column;
      width:100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;
      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }
      span{
        margin-top: 10px;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
      }
    }
  }
}
.follow-up-dialog{
  :deep(.el-dialog){
    @include mixin.flex-column;
    max-height: 80vh;
    overflow-y: hidden;
  }
  :deep(.el-dialog__header){
    margin-bottom: 24px;
  }
  :deep(.el-dialog__body){
    @include mixin.flex-overflow;
  }
  :deep(.el-date-editor){
    width: 100% !important;
  }
  .dialog-footer{
    text-align: center;
  }
}
.submit-task-dialog{
  :deep(.el-select__wrapper){
    box-shadow: none;
  }
  .dialog-footer{
    text-align: center;
  }
}
// 操作说明
.instructions-container {
  @include mixin.flex-column;
  overflow: auto;
  position: fixed;
  left: v-bind(instructionsLeft);
  top: v-bind(instructionsTop);
  z-index: 9999;
  width: 400px;
  height: 90vh;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  .arrow {
    position: fixed;
    left: v-bind(arrowLeft);
    top: v-bind(arrowTop);
    z-index: 9999;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left: 14px solid #fff;
  }
  .editor-container {
    flex: 1;
    width: 100%;
    overflow: auto;
  }
}

//顶部
.header{
  display: flex;
  //display: grid;
  //grid-template-columns: 5fr 1fr;
  //gap: 5px;
  margin-bottom: 20px;
  &__bg{
    height: 75px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: #F3F5F9;
      button{
        width: 130px;
        height: 30px;
      }

  }
   &__left{
     background: #F3F5F9;
     border-radius: 10px 0px 0px 10px;
     display: flex;
     align-items: center;
     flex-grow: 1;
     .delay-risk{
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       flex-grow: 1;
       font-weight: bold;
       .red-color{
         color: #EA0000;
       }
       .black-color{
         color: #3D3D3D;
       }
       &__img{
         margin-left: 5px;
         padding-right: 5px;
         margin-right: 20px;
         box-shadow: 4px 0px 8px 0px rgba(5,62,88,0.1);
         img{
           width: 72px;
           height: 72px;
         }
       }

       &__title{
         font-size: 16px;
         color: #FFA73B;
         margin-bottom: 10px;

       }
       &__desc{
         font-size: 12px;
         color: #86909C;
         font-weight: normal;
       }
     }
     .operate-list{
       display: flex;
       align-items: center;
       margin-left: 30px;

       .operate-item{
         padding-right: 20px;
         color: #007DFF;
         cursor: pointer;
         display: flex;
         align-items: center;
         font-size: 14px;
         white-space: nowrap;
         font-weight: bold;
         &::before{
           content: '';
           width: 4px;
           height: 32px;
           background: #E1E6ED;
           margin-right: 20px;
           border-radius: 2px;
           display: inline-block;
         }
         .switch-list{
           display: flex;
           background: #D7DFEA;
           padding: 3px;
           color: #fff;
           font-size: 12px;
           border-radius: 5px;
           &--active{
             background: #007DFF;
             .switch-item--active{
               color: #007DFF !important;
             }
           }
           .switch-item{
             width: 60px;
             height: 24px;
             text-align: center;
             line-height: 24px;
             &--active{
               background: #FFFFFF;
               box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
               border-radius: 5px 5px 5px 5px;
               color: #86909C;

             }
           }

         }

       }
     }
   }
  &__right{
    background: #F3F5F9;
    margin-left: 5px;
    padding: 12px 20px;
    border-radius: 0px 10px 10px 0px;
    color: #181818;
    font-size: 12px;
    display: flex;
    align-items: center;
    .notice{
      margin-left: 10px;
      line-height: 18px;
      span{
        color: #007DFF;
        cursor: pointer;
        margin-left: 20px;
      }
      }
  }
}

//搜索下拉框
.filter-select{
  :deep(.el-form--inline){
    .el-form-item{
      width: 250px;
    }
    .el-select__wrapper{
      box-shadow: none;
    }
  }
}
//搜索下拉框
.filter-stage{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  border: 1px solid #E1E6ED;
  border-bottom: none;
  font-size: 14px;
   position: relative;
  padding: 0px 20px 0px 100px;
  .stage-list{
    width: 60%;
    overflow-x: auto;
    overflow-y:hidden ;
    white-space: nowrap;
    .stage-title{
      font-weight: bold;
      color: #3D3D3D;
      position: absolute;
      left: 20px;
    }
    .stage-item{
      //width: 83px;
      height: 24px;
      line-height: 24px;
      display: inline-block;
      text-align: center;
      color: #4E5969;
      margin-left: 10px;
      padding: 0px 15px;
      cursor: pointer;
      &--active{
         background: #F2F3F8;
        border-radius: 32px;
        color: #007DFF;
      }
    }
  }
  .filter-other{
    color: #191919;
    display: flex;
    &__notComplete{
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    &__history{
        padding-left: 20px;
        display: flex;
        align-items: center;
        color: #007DFF;
        cursor: pointer;
        &::before{
          content: '';
          width: 4px;
          height: 19px;
          background: #E1E6ED;
          border-radius: 2px;
          display: inline-block;
          margin-right: 20px;
        }
      }
  }
}


.tab-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag{
  width: 56px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

.tab-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 施工阶段
.construction-stage-btn{
  @include mixin.flex-align;
  margin-left: 20px;
  &__label{
    margin-left: 10px;
    color: #606266
  }
}


